<template>
	<view class="community-content">
		<view class="topic">
			<view class="topic-title">
				<text>热门</text>
				<image src="@/static/icons/fire.png" mode="aspectFill"></image>
				<text>话题</text>
			</view>
			<view class="topics">
				<view class="topic-content" v-for="(item,index) in topics" :key="index">
					<text class="topic-tag">{{item.tag}}</text>
					<text class="topic-count">{{item.count}}</text>
				</view>
			</view>
		</view>
		<view class="comunity-friends">
			<text class="friends-title">圈友说</text>
			<view class="friend-header">
				<image src="@/static/images/logo.png" mode="aspectFill"></image>
				<text class="friend-name">黄晓杰又来咯</text>
				<view class="follow-btn">+关注</view>
			</view>
			<view class="friend-content">
				<text class="friend-tag">#捡垃圾的快乐时光</text>
				<text class="friend-text">今天把小区的垃圾清理了不谈，还顺势卖点小钱</text>
				<image src="@/static/images/community-content.jpg" mode="aspectFill"></image>
				<view class="friend-bottom">
					<text class="text">10分钟前</text>
					<view class="action-buttons">
						<view class="action-btn" @click="toogleLike">
							<u-icon :name="isLiked ? 'thumb-up-fill' : 'thumb-up'" size="36"
								:color="isLiked ? '#07C160' : '#666'"></u-icon>
							<text class="action-text">{{isLiked ? "已赞" : "赞"}}</text>
						</view>
						<view class="action-btn" @click="showCommentInput = true">
							<u-icon name="chat" size="36"></u-icon>
							<text class="action-text">评论</text>
						</view>
					</view>
				</view>
				<!-- 点赞列表 -->
				<view class="like-list" v-if="likes.length > 0">
					<u-icon name="thumb-up-fill" size="28" color="#07C160"></u-icon>
					<text class="like-names">
						<text v-for="(item,index) in likes" :key="item.id">
							{{item.name}}{{index < likes.length -1 ? '、': ''}}
						</text>
					</text>
				</view>
				<!-- 评论列表 -->
				<view class="comment-list" v-if="comments.length > 0">
					<view class="comment-item" v-for="item in comments" :key="item.id" @click="deleteComment">
						<text class="comment-name">{{item.name}}:</text>
						<text class="comment-content">{{item.content}}</text>
					</view>
				</view>
				<!-- 评论输入框 -->
				<view class="comment-input-container" v-if="showCommentInput">
					<u-input placeholder="请友善评论" :border="true" :focus="true" v-model="commentContent"></u-input>
					<text class="send-btn" @click="addComment">发送</text>
				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	const topics = reactive([{
			tag: '#塑料污染',
			count: '1.4万互动'
		},
		{
			tag: '#零废弃污染',
			count: '2.2万互动'
		},
		{
			tag: '#低碳生活',
			count: '2222互动'
		}
	])

	//点赞的状态 
	const isLiked = ref(false);
	// 点赞列表
	const likes = reactive([])

	// 评论相关状态
	const comments = reactive([])
	const showCommentInput = ref(false)
	const commentContent = ref('')


	// 切换点赞状态
	const toogleLike = () => {
		isLiked.value = !isLiked.value;
		if (isLiked.value) {
			// 添加点赞用户
			likes.push({
				name: '黄晓杰又来咯',
				id: Math.random()
			})
		} else {
			// 移除点赞用户
			likes.splice(0, 1)
		}
	}

	// 添加评论
	const addComment = () => {
		if (commentContent.value.trim()) {
			comments.push({
				id: Math.random(),
				name: '黄晓杰又来咯',
				content: commentContent.value
			})
			commentContent.value = ''
			showCommentInput.value = false
		}
	}

	// 删除评论
	const deleteComment = () => {
		comments.splice(0, 1)
	}
</script>

<style lang="scss">
	.community-content {
		padding: 0 52rpx;
		margin-top: 40rpx;

		.topic {
			padding: 20rpx 0;

			.topic-title {
				display: flex;
				align-items: center;

				text {
					font-size: 56rpx;
					font-weight: bold;
					color: #333;
				}

				image {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.topics {
				padding-right: 30rpx;
				margin: 48rpx 20rpx 0;

				.topic-content {
					line-height: 80rpx;
					display: flex;
					justify-content: space-between;

					.topic-tag {
						font-size: 28rpx;
						color: #101010;
					}

					.topic-count {
						font-size: 28rpx;
						color: #6C6C6C;
					}
				}
			}
		}

		.comunity-friends {
			width: 100%;

			.friends-title {
				font-size: 40rpx;
				line-height: 80rpx;
				font-weight: bold;

			}

			.friend-header {
				display: flex;
				align-items: center;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-right: 20rpx;
				}

				.friend-name {
					color: #101010;
					font-size: 28rpx;
				}

				.follow-btn {
					width: 110rpx;
					margin-left: 260rpx;
					border: 2rpx solid #BBBBBB;
					border-radius: 30rpx;
					font-size: 28rpx;
					color: #101010;
					text-align: center;
					line-height: 60rpx
				}
			}

			.friend-content {
				margin-top: 20rpx;

				.friend-tag {
					font-size: 28rpx;
					font-weight: bold;
					color: #101010;
					margin-right: 6rpx;
					line-height: 50rpx;
				}

				.friend-text {
					font-size: 28rpx;
					color: #101010;
					line-height: 50rpx;
				}

				image {
					height: 320rpx;
					width: 100%;
				}
			}

			.friend-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 16rpx;

				.text {
					font-size: 24rpx;
					color: #BBBBBB;
				}

				.action-buttons {
					display: flex;

					.action-btn {
						display: flex;
						align-items: center;
						margin-left: 40rpx;

						.action-text {
							font-size: 24rpx;
							color: #666;
							margin-left: 10rpx;
						}
					}
				}
			}

			.like-list {
				display: flex;
				align-items: center;
				background-color: #f7f7f7;
				border-radius: 10rpx;
				padding: 12rpx 16rpx;
				margin-top: 16rpx;

				.u-icon {
					margin-right: 8rpx;
				}

				.like-names {
					font-size: 24rpx;
					width: 200px;
					/* 限制容器宽度 */
					display: -webkit-box;
					/* 设置为WebKit内核的弹性盒子模型 */
					-webkit-box-orient: vertical;
					/* 垂直排列 */
					-webkit-line-clamp: 2;
					/* 限制显示两行 */
					overflow: hidden;
					/* 隐藏超出范围的内容 */
					text-overflow: ellipsis;

					/* 使用省略号 */
					text {
						margin-right: 8rpx;
					}
				}
			}

			.comment-list {
				margin-top: 16rpx;

				.comment-item {
					background-color: #f7f7f7;
					border-radius: 8rpx;
					padding: 12rpx 16rpx;
					margin-bottom: 8rpx;

					.comment-name {
						font-size: 26rpx;
						color: #101010;
					}

					.comment-content {
						font-size: 26rpx;
						color: #333;
					}
				}
			}

			.comment-input-container {
				display: flex;
				align-items: center;
				background-color: #f7f7f7;
				border-radius: 8rpx;
				padding: 12rpx 16rpx;
				margin-top: 16rpx;

				.u-input {
					flex: 1;
					padding: 0;
					background-color: transparent;
				}

				.send-btn {
					font-size: 28rpx;
					color: #07C160;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>